<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="include :: header('新增文章')" />
	<th:block th:include="include :: datetimepicker-css" />
	<th:block th:include="include :: bootstrap-fileinput-css" />
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<script type="text/javascript" charset="utf-8" th:src="@{/ueditor/ueditor.config.js}"></script>
	<script type="text/javascript" charset="utf-8" th:src="@{/ueditor/ueditor.all.js}"> </script>
	<script type="text/javascript" charset="utf-8" th:src="@{/ueditor/lang/zh-cn/zh-cn.js}"></script>
	<link type="text/css" rel="stylesheet" th:href="@{/ueditor/third-party/video-js/video-js.css}"/>
	<script  type="text/javascript" th:src="@{/ueditor/third-party/video-js/video.js}"></script>+
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
	<form class="form-horizontal m" id="form-notice-add">
		<!--<input id="treeId" name="cloumnId" type="hidden" th:value="${cloumn.id}"/>-->
		<div class="form-group">
			<label class="col-sm-2 control-label">文章标题：</label>
			<div class="col-sm-10">
				<input id="noticeTitle" name="noticeTitle" class="form-control" type="text" required>
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-2 control-label">副标题：</label>
			<div class="col-sm-10">
				<input id="subtitle" name="subtitle" class="form-control" type="text">
			</div>
		</div>
	<!--	<div class="form-group">
			<label class="col-sm-2 control-label ">文章栏目：</label>
			<div class="col-sm-10">
				<div class="input-group">
					&lt;!&ndash;<input class="form-control" type="text" onclick="selectDeptTree()" id="treeName" readonly="true" th:value="${cloumn.name}">&ndash;&gt;
					<input class="form-control" type="text" onclick="selectDeptTree()" id="treeName" readonly="true" >
					<span class="input-group-addon"><i class="fa fa-search"></i></span>
				</div>
			</div>
		</div>-->
		<div class="form-group">
			<label class="col-sm-2 control-label">文章栏目：</label>
			<div class="col-sm-10">
				<select id="post" class="form-control" required>
					<option th:each="cloumn:${cloumns}" th:value="${cloumn.id}" th:text="${cloumn.name}" ></option>
				</select>
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-2 control-label">文章来源：</label>
			<div class="col-sm-10">
				<input  name="comefrom" class="form-control" type="text" required>
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-2 control-label">创建时间：</label>
			<div class="col-sm-10">
			<div class="input-group date">
				<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
				<input type="text"  name="createTime"  class="form-control" id="datetimepicker-demo-3" placeholder="yyyy-MM-dd HH:mm:ss">
			</div>
			</div>
		</div>
		<div class="form-group" style="display: none;">
			<label class="col-sm-2 control-label">文章摘要：</label>
			<div class="col-sm-10">
				<input id="remark" name="remark" class="form-control" type="text" required>
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-2 control-label">轮播图：</label>
			<div class="col-sm-10">
				<input  id="imgfiles" name="file" accept=".png,.jpg,.gif,.bmp,.jpeg" class="form-control" type="file">
				<input name="imageurl"  id="imageurl"   type="hidden">
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-2 control-label">是否轮播：</label>
			<div class="col-sm-10">
				<label class="toggle-switch switch-solid">
					<input type="checkbox" id="isShuffling"  checked>
					<span></span>
				</label>
			</div>
		</div>
		<div class="form-group" id="div2">
			<label class="col-sm-2 control-label">轮播位置：</label>
			<div class="col-sm-10">
				<select name="shufflingType" th:with="type=${@dict.getType('shuffling_type')}" class="form-control ">
					<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" ></option>
				</select>
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-2 control-label">文章内容：</label>
			<div class="col-sm-10">
				<textarea id="editors"    type="text/plain" style="width:1024px;height:500px;" name="noticeContent" ></textarea>
			</div>
		</div>

	<!--	<div class="form-group">
			<label class="col-sm-2 control-label">文章状态：</label>
			<div class="col-sm-10">
				<label class="toggle-switch switch-solid">
					<input type="checkbox" id="status"  checked>
					<span></span>
				</label>
			</div>
		</div>-->
	</form>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: datetimepicker-js" />
<th:block th:include="include :: bootstrap-fileinput-js" />
<script type="text/javascript">
	var prefix = ctx + "system/notice";
	var pref = ctx + "system/cloumn";

	$("#isShuffling").on("change",function  () {
		var isShuffling = $("input[id='isShuffling']").is(':checked') == true ? 1 : 0;
		if (isShuffling == 0) {
			$("#div2").attr("style", "display:none;");
		} else {
			$("#div2").attr("style", "display:block;");
		}
	})
	$("#datetimepicker-demo-3").datetimepicker({
		format: "yyyy-mm-dd hh:ii:ss",
		autoclose: true,
		todayBtn :true
	});
	$("#imgfiles").fileinput({
		language: 'zh', //设置语言
		'showUpload': true,
		'previewFileType': 'image',
		'showPreview': true,
		'showClose': false,
		allowedFileExtensions: ["png","jpg","gif","bmp","jpeg"],//接收的文件后缀
		uploadAsync: true, //默认异步上传
		uploadUrl: ctx + "common/upload", //上传的地址
		dropZoneEnabled: false,//是否显示拖拽区域
		autoReplaceBoolean : false,//选择图片时不清空原图片
		maxFileCount: 9,
		deleteUrl: ""
	});
	var img_urls =  "";
	$('#imgfiles').on('fileuploaded', function(event, data, previewId, index) {
		if(typeof(data.response.url) != 'undefined'){
			img_urls = img_urls+data.response.url;
			$("#imageurl").val(img_urls);
		}
	});

	function submitHandler() {
		if ($.validate.form()) {
			$.operate.save(prefix + "/add", $('#form-cloumn-add').serialize());
		}
	}

	$("#form-notice-add").validate({
		focusCleanup: true
	});

	function submitHandler() {
		if ($.validate.form()) {
            var cloumnId = $.form.selectSelects("post");
			var data = $("#form-notice-add").serializeArray();
			/*var status = $("input[id='status']").is(':checked') == true ? 0 : 1;
			data.push({"name": " status", "value": status});*/
			var isShuffling = $("input[id='isShuffling']").is(':checked') == true ? 1 : 0;
			data.push({"name": "isShuffling", "value": isShuffling});
            data.push({"name": "cloumnId", "value":cloumnId});
			$.operate.save(prefix + "/add", data);
		}
	}
	/*用户管理-新增-选择部门树*/
	function selectDeptTree() {
		var url = pref + "/selectTree"+$("#treeId").val();
		var options = {
			title: '选择栏目',
			width: "380",
			url: pref + "/selectTree/" + $("#treeId").val(),
			callBack: doSubmit
		};
		$.modal.openOptions(options);
	}
	function doSubmit(index, layero){
		var body = layer.getChildFrame('body', index);
		$("#treeId").val(body.find('#treeId').val());
		$("#treeName").val(body.find('#treeName').val());
		layer.close(index);
	}

	var ue = UE.getEditor('editors',{
	});

	$(function(){
		var ue = UE.getEditor('editors')
		ue.addListener("ready", function () {
		});
	});
</script>
</body>
</html>
